<template>
  <div id="app">
    <h1>Vue 项目优化示例</h1>
    <p>{{ message.split('').reverse().join('') }}</p>
    <!--
      1. 使用方式：
        - 方法需要调用，可以传参
        - 计算属性不能调用，不能传参
      2. 缓存
        - 计算属性默认会缓存计算结果
        - 方法没有缓存
     -->
    <p>{{ reverseMessage() }}</p>
    <p>{{ reverseMessage() }}</p>
    <p>{{ reverseMessage() }}</p>
    <p>{{ reverseMessage() }}</p>
    <p>{{ reverseMessage() }}</p>
    <p>{{ rMessage }}</p>
    <p>{{ rMessage }}</p>
    <p>{{ rMessage }}</p>
    <p>{{ rMessage }}</p>
    <p>{{ rMessage }}</p>

    <ul>
      <li
        v-for="todo in todos.filter(todo => todo.done)"
        :key="todo.id"
      >{{ todo.text }}</li>
    </ul>

    <ul>
      <li
        v-for="todo in getAllDoneTodos()"
        :key="todo.id"
      >{{ todo.text }}</li>
    </ul>

    <ul>
      <li
        v-for="todo in allDoneTodos"
        :key="todo.id"
      >{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    HelloWorld: () => import('@/components/HelloWorld') // 异步组件
  },
  data () {
    return {
      // 基于原有的 data、prop、computed 等数据派生出别的数据
      message: 'Hello World',
      todos: [
        { id: 1, text: 'eat', done: false },
        { id: 2, text: 'play', done: false },
        { id: 3, text: 'sleep', done: true }
      ],
    }
  },
  computed: {
    // rMessage 的 get 访问器
    rMessage () {
      console.log('rMessage')
      return this.message.split('').reverse().join('')
    },

    // 计算属性就是可以写逻辑的 data
    allDoneTodos () {
      return this.todos.filter(t => t.done)
    }
  },
  methods: {
    reverseMessage () {
      console.log('reverseMessage')
      return this.message.split('').reverse().join('')
    },
    getAllDoneTodos () {
      return this.todos.filter(t => t.done)
    }
  }
}
</script>
